<template>
  <div>
    <cus-modal
      ref="modal"
      :title="!form.modeId ? '添加配餐模式' : form.modeName + ' - 修改配餐模式'"
      @on-visible-change="onVisibleChange"
      width="80"
      okBtnName="配餐设置"
      @onOk="onOk"
      @onOther="onOther"
      @onCancel="onCancel"
      :showOtherBtn="!form.modeId ? true : false"
    >
      <div style="margin-bottom:10px">
        模式名称：<Input
          v-model="form.modeName"
          maxlength="20"
          :clearable="!form.modeId"
          placeholder="请输入模式名称"
          style="width: 200px"
        ></Input>
      </div>
      <Table border :loading="loading" :columns="columns" :data="data">
        <template slot-scope="{ row, index }" slot="基本主食">
          <InputNumber
            :min="0"
            :max="row.name == '个人份量' ? '1000' : '10'"
            v-model.sync="data[index]['基本主食']"
            style="width:100%"
          ></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="花样主食">
          <InputNumber
            :min="0"
            :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['花样主食']"
            style="width:100%"
          ></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="大荤">
          <InputNumber
            :min="0"
            :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['大荤']"
            style="width:100%"
          ></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="半荤">
          <InputNumber
            :min="0"
            :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['半荤']"
            style="width:100%"
          ></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="小荤">
          <InputNumber
            :min="0"
            :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['小荤']"
            style="width:100%"
          ></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="全素">
          <InputNumber
            :min="0"
            :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['全素']"
            style="width:100%"
          ></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="小菜">
          <InputNumber
            :min="0"
            :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['小菜']"
            style="width:100%"
          ></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="点心">
          <InputNumber
            :min="0"
            :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['点心']"
            style="width:100%"
          ></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="乳品">
          <InputNumber
            :min="0"
            :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['乳品']"
            style="width:100%"
          ></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="蛋品">
          <InputNumber
            :min="0"
            :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['蛋品']"
            style="width:100%"
          ></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="粥">
          <InputNumber
            :min="0"
            :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['粥']"
            style="width:100%"
          ></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="汤">
          <InputNumber
            :min="0"
            :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['汤']"
            style="width:100%"
          ></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="水果">
          <InputNumber
            :min="0"
            :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['水果']"
            style="width:100%"
          ></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="饮料">
          <InputNumber
            :min="0"
            :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['饮料']"
            style="width:100%"
          ></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="军用食品">
          <InputNumber
            :min="0"
            :max="row.name == '个人份量' ? '1000' : '10'"
            v-model="data[index]['军用食品']"
            style="width:100%"
          ></InputNumber>
        </template>
      </Table>
    </cus-modal>
    <!-- 模式菜肴详情 -->
    <modeDishesDetail
      ref="modeDishesDetail"
      @peiSuccess="peiSuccess"
    ></modeDishesDetail>
  </div>
</template>

<script>
import {
  getCateringModeNumber,
  saveCateringModeNumber
} from "@/api/business/dishesModule";
import modeDishesDetail from "./modeDishesDetail";
export default {
  components: { modeDishesDetail },
  data() {
    return {
      loading: false,
      form: { modeId: "", modeName: "" },
      columns: [
        {
          title: "",
          align: "center",
          children: [
            {
              title: "餐次",
              key: "name",
              align: "center",
              width: 100
            }
          ]
        },
        {
          title: "主食",
          align: "center",
          children: []
        },
        {
          title: "副食",
          align: "center",
          children: []
        },
        {
          title: "小吃饮品和其他",
          align: "center",
          children: []
        }
      ],
      data: [],
      slotList: []
    };
  },
  mounted() {
    // this.form = this.$cu.deepClone(form);
  },

  watch: {
    data: {
      handler(newVal, oldVal) {
        newVal.forEach(item => {
          for (let it in item) {
            if (item[it] == null) {
              console.log(item[it]);
              item[it] = 0;
            }
          }
        });
        console.log(this.data);
        this.data = newVal;
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    onVisibleChange(v) {
      if (!v) {
        this.form = { modeId: "", modeName: "" };
        this.columns[1].children = [];
        this.columns[2].children = [];
        this.columns[3].children = [];
      }
    },
    show() {
      this.$refs["modal"].show = true;
      // if (this.form.modeId) {
      //     this.getCateringModeNumberApi();
      // }
      this.getCateringModeNumberApi();
    },
    onOk() {
      this.$refs["modeDishesDetail"].form.modeName = this.form.modeName;
      this.$refs["modeDishesDetail"].form.modeId = this.form.modeId;
      this.saveCateringModeNumberApi()
        .then(() => {
          this.$refs["modeDishesDetail"].show(this.form);
        })
        .catch(() => {});
    },
    onCancel() {
      this.$parent.searchCateringModeListApi();
    },
    // 获取模板信息
    getCateringModeNumberApi() {
      this.loading = true;
      this.data = [];
      this.slotList = [];
      return new Promise(resolve => {
        getCateringModeNumber({ modeId: this.form.modeId }).then(res => {
          this.loading = false;
          if (res.retCode === 2000) {
            if (res.data.superiorCategory) {
              this.slotList = res.data.dishCategory;
              let superiorCategory = res.data.superiorCategory;
              // 表格制作
              superiorCategory.map((item, index) => {
                if (item == "主食") {
                  this.columns[1].children.push({
                    title: res.data.dishCategory[index],
                    slot: res.data.dishCategory[index],
                    align: "center",
                    width: 100
                  });
                }
                if (item == "副食") {
                  this.columns[2].children.push({
                    title: res.data.dishCategory[index],
                    slot: res.data.dishCategory[index],
                    align: "center"
                  });
                }
                if (item == "小吃饮品和其他") {
                  this.columns[3].children.push({
                    title: res.data.dishCategory[index],
                    slot: res.data.dishCategory[index],
                    align: "center"
                  });
                }
              });
              // 表格数据
              let nameList = [
                { name: "早餐", key: "breakfast" },
                { name: "午餐", key: "lunch" },
                { name: "晚餐", key: "supper" },
                { name: "个人份量", key: "dishWeight" }
              ];
              nameList.map((item, index) => {
                let obj = { name: item.name };
                res.data.dishCategory.map((it, idx) => {
                  obj[it] = res.data[item.key][idx];
                });
                this.data.push(obj);
              });
            }
            resolve();
          }
        });
      });
    },
    peiSuccess() {
      this.columns[1].children = [];
      this.columns[2].children = [];
      this.columns[3].children = [];
      this.$refs["modal"].show = false;
      // this.getCateringModeNumberApi()
    },
    // 保存
    onOther() {
      this.saveCateringModeNumberApi();
    },
    // 保存API
    saveCateringModeNumberApi() {
      return new Promise((resolve, reject) => {
        if (!this.form.modeName) {
          this.$Message.warning("配餐模式名称不能为空.");
          reject();
          return;
        }
        let lunch = [];
        let dishWeight = [];
        let breakfast = [];
        let supper = [];
        this.data.forEach((item, index) => {
          if (index == 0) {
            this.slotList.map((it, idx) => {
              breakfast.push(item[it]);
            });
          }
          if (index == 1) {
            this.slotList.map((it, idx) => {
              lunch.push(item[it]);
            });
          }
          if (index == 2) {
            this.slotList.map((it, idx) => {
              supper.push(item[it]);
            });
          }
          if (index == 3) {
            this.slotList.map((it, idx) => {
              dishWeight.push(item[it]);
            });
          }
        });
        saveCateringModeNumber({
          modeId: this.form.modeId,
          modeName: this.form.modeName,
          lunch: lunch,
          supper: supper,
          breakfast: breakfast,
          dishWeight: dishWeight
        }).then(res => {
          this.loading = false;
          if (res.retCode === 2000) {
            this.$parent.searchCateringModeListApi()
            if (!this.form.modeId) {
              this.$Message.success("保存成功.");
              this.$emit("freshGrid");
            }
            this.form.modeId = res.data;
            this.peiSuccess();
            resolve();
          }
        });
      });
    }
  }
};
</script>

<style scoped lang="less">
.permission {
  height: 300px;
  width: 500px;
  border: 1px solid #dcdee2;
  overflow-y: auto;
  border-radius: 2px;
  padding: 0 0 0 10px;
}
</style>
